والحمد لله رب العالمين 


الف والام اى اا هدا اوو و ا 0 و 
اجمعين 


اھ داء.. 


إهداء لكل شخص يسعيى للتعلم و الأستفادة.. 
إأهداء لكل من علمني حرفا و ساعدني أن أصل الى مأنا عليه.. 


إاھهداء خاص.. 
لمطور موقعا و أدارة و أعضاء و زائرين 


MIWER.COM واف‎ 


فهرس الدورة : 


الدورة مقسمه لجزئين: 
اولا:التعامل مع مجلة ۵ 0۳٥ز‏ بکل شىء فيها ان شاء الله 
وفهرسها يشمل الأتى: 
1-شرح تنصيب المجلة على موقعك او السيرفر المحلى 
٣-شرح‏ التعامل مع لوحة التحكم الخاصة بالمجلة 
ويینفسمر هذا الحزء لقسمين : 
اوا 
-شرح كيفية تركيب الاضافات والقوالب والملحقات الخاصة بالمجلة 
ارك على المودبلات القوالت لثملا ت اوھ وئت ت( ماقى قم ها 
كيفية التحكم بها) 


تانيا: 
-شرح القوالب والثيمات الخاصة بجمله(تركيبها-الخيارات وشرحها-كيفية 
التعديل) 
-بدءا من هذا الجزء راح ننتقل لجزئية التصميم والتعديل على القوالب 
يشمل ذلك: 
-تعلم فنون تعريب القوالب 
-تعلم فنون التعديل على الوان القالب باستخدامككع 
-تعلم فنون كيفية تصميم هيدر+فوتر للقالب 
-تعلم فنون تنظيم اماكن الموديلات فى القالب 


MIWER.COM وا‎ 


ثانيا: التعامل مع مجlة mkportal‏ 
وفیو اراح نته رف عل ى الأ ى؟: 


ENE a a 
م فز نون ا المحل ةة‎ لعت-٣‎ 
كيفية التعديل على بلوكات المجلة‎ ملعت-٣‎ 


وفى النهاية راح يكون فيه موضوع للنقاش للرد على استفسارات الاعضاء 
فى كل درس يتم شرحه .» حتى نوصل المعلومة للمشترك فى الدورة باقصى 
درجه 


أیضاآً يطلب من کل متدرب آن يعمل على تطبیق دروس الدورة 
وبالنهاية ارفاق الإستايل + صورة منه لما قام 
بتطبيقه خلال الدورة لتقييم عملهء 
كما يطلب ارفاق صور لكل خطوات الدورة وذلك بمواضيع النقاشات لكل درس. 


تنبيه:// الدورة هي مشاركة وتفاعل بين الأعضاء والمشاركين والمتلقين 
لذلك احرص عزيزي المتلقي أن يكون ردك فعالاً مشاركا 
ولو بمعلومة إن لم يكن تطبيقآً ليكون ردك مفيدآ نافعاً 

وتكون مساهماً بإلقاء الدورة بشكل أو بآخر. 

وفى النهاية أطلب منكم الدعاء لى 
بأن يوşقنى‏ الل فی دینی ودنیای 
وان يرحمنا ویرحم المسلمين جميعا الاحياء 

منهم والاموات 
مع التحية 


vista-designpكgخİ‎ 


وهذا واللّه ولى التوفيق 


MIWER.COM مط‎ 


فهرس الوصول السريع للدروس: 
متطلبات الدورة 
[joomla |‏ شرح تنصيب المجلة وتركيبها لی السيرفر المكي او موقعك 
[0n|22هز[]‏ شرح لوحة تحكم المجلة وتعريف للقوالب-الموديلات-الكومبونينت 
[ a3ا0omز]‏ شرح القالبعاةامصmعt‏ تعريفه-اجزائة البرمحجية-البوسشنات 


[a4ا00mز]‏ شرح تصميم الهيدر والفوتر للقالب والتعديل عليه 
[a5اomهز]‏ شرح الءيء الخاص بكل قالب وكيفية التعديل عليه 


0m 26[‏ ز] شرح تنظيم أماكن الموديلات+تعديل خطوط القالب لرؤية أوضح 

0a 1‏ درش نرمجة قالب مجلة جملة تقس من الضفر (اقوف درس قى 
الدورة) 

[1اrtaمmkp]‏ شرح تركيب المجلة على السيرفر المحلى وتشغيلما 

[kporta12ص]‏ درس تأطير وتصميم بلوكات المجلة 


بسم الله الرحمن الرحيم 


نبدأً انطلاقة الدورة راجيا من العلى القدير ان تتم على خير 


أولا: متطلبات الدورة: 
1-السیرفر المحلی :ویفضل 005٤۲۷‏ الاصدار ٣,۵,۹‏ 


اضغط هنا رابط مباشر 


joomlaةlzn-2‎ 


أضغط هاا 


mkportalةlzoe-3‎ 


أضغط هنا 


MIWER.COM واف‎ 


5-برنامج الفوتوشوب ٤S51كع‏ otos0pام‏ الداعم للعربية + الكيجن 


للتحميل برابط واحد فقط يدعم استكمال التحميل: 


أضغط هنا 
الحجم: ۲۹۲ میحا 
ر امج اقروت ية ٠‏ ر انط واخد فط ندعم اس كمال اها 


http://uploading.com/files/433Q5YN7T/...part1.rar. html 
http://uploading.com/files/W7ZGSIEB4/...part2.rar. html 
http://uploading.com/files/4R4FXBKH/...part4.rar. html 
http://uploading.com/files/GS I1ADMER/...part3.rar. html 
: السيريال‎ 
http://uploading.com/files/SHEDORTX/key.rar.html 


الحجم: ۲۰۰ ميجابايت تقريبا 


نرحو من الجحميع ان تكون جميع هذه الادوات متوفرة قبل البدء 
مع التحية 


vista-design 


MIWER.COM واف‎ 


[a1ا00mز]‏ شرح تنصيب المجلة وتركيبها على السيرفر المحلى أو موقعك 


نبدأ انطلاقة الدورة بأذن الله 
اولا:شرح تنصيب مجلة جملة على سيرفرك المحلى: 
١-بعد‏ تركيب السيرفر المحلى )راحع هذا الدرس لمعرفة طريقة تركب السيرقر 
المحلى,(قم 
بعمل قاعدة بيانات جديده للمحلة من p6۸0۸۳۷3 0 7۳1٩‏ 
۲-ضع مجلد المجلة فى ملفWNWW‏ 


٣-استدعى‏ رابط المجلة من المتصفح بكتابة ×oc00/0.اnosماocaا www.‏ حیث 
×××هو اسم مجلد المجلة 


ه-تابع طريقة تنصيب المجلة كالأتى: 


¥ إنحص بجدداً 0 الخطوة السابقة ٠‏ التالى | 


Joomla! 1.5.3 Productlion‘Stable [ Wohnalki ] 


دار 4,3,10 == PHP‏ نج 
- دعم الضغخط باستخذام طااك نح 
- دعم لا“ نجع 
- دعم ا12 نجع 
[عدذاذات ۹ 6-5۲٣٣‏ للجة البافتراتية نج 
[عذاذات 6B-5]١٣٣۹‏ لشدذة التخصبل صتوففة نجحد 
con اİi guration. php‏ قابل للتتابة علید نح 
vista-design :‏ 
mtwer.com 4d |j‏ 
a‏ 3 اتس دورة تمم المجلآت الالكروتية 
اللآعدذاد ینضحح بها Jl‏ 
الوضح الأمن إعغكتا e‏ ا مطل صجعطظل 
عرض الأخطاء: یری بی سرع مجطل بعصل 
رفح الصلقات : يعحصل بحصلي 
Magic Hotes Runtime‏ : صمجطل تجطل 
Register alobals‏ ك بجصل 
:Gutpukt Buffering‏ مجطل حصجطل 
بدا التشخيل الألي ل اتاأككعة: مجطل صجعطظل 
MITWER.C O‏ 


ا 


f 


MIWER.COM واف‎ 


7 الخطية السابفة التالى‎ E vista-design 


دور کی رشن ١‏ یکا سے 
الالكترونبة کے ا 
الإجدادات الأساسية ڊj mtwer.com 4 la‏ 


نوع قاعدة البيانات ۰ 
و 

نوانا الصستنضيف خوت قي الاب اعو قوع مرو ازس قم صن دف 
localhost‏ الس تضيق 


م الصس دد يصن أت يكوت اسر المسحخ دم فعاضي اقاعة ابات 


rout‏ و اسا شا صر ك اتن طد اضيا اج اسل 
E‏ 


اساب تة بيد سخلا قيصة دور اشا حاف شيشا ت 


| قاعة اينات الخاصة بك ونكون محددة مسقا من طرف 


ااا تيص و اجك . 
a‏ تسح عضي بقلت لمات اا عضا فة صاصر اح 
ا انات وحيدة ققط. انا مت تعاس صن شنة اشصشقلة رتك 
TE‏ 
مشا رة جصلةة لبا ص خر في قاحدة انبشات . 
اكتب ‏ الاعدادات الائيةولاحظ ان هذه الاعدادات نخثلف 


لو نصبت المجلة على موقع فعلى 


4 الاسدادات التتقد دة 


Fn‏ ا وک چون ای 


لرعا ده mtwer.com‏ 
| 


اختار ل مم +" 


الخد اد ات الأساسية 


السصاح بحصل طبقة برونوگول نقل الملفات ۴۴ لملغات النظات 


تلحة المرور ل ۴۲۴ 


المساز الرثيسي ل 
FTP‏ 


التحاق من إعدادات بروتوگول نفل الملفات ۲۲۴ 
هه الادادات التفدها 
vista-design‏ 
دور تسشن المجللات الآلكثرنية 


MT WFR. O 


MIWER.COM مط‎ 


ملاحظه :خطوة كتابة بيانات صا مهمه لو كان السيرفر على موقعك(ولیس 
الفبرفر المجلى (مففل اليف موه 


برعا ل4 mtwer.com‏ ,ر ل انطو لسابنة 
دورة تصمبم النجلات . 


a 1 


سم الموقه 


اکتب انات الدخول ۳ اد 
بريذاك البالتنرفي rm Yl. CONT‏ 


هة لمر ل لمو 


نايد كلصة الصرور لصنير 
الموقح 


تبي ااا ااش قو جمة صد جد ودع يتاي في اس اتا 
جال . حا سعصل حي اء الوجعوع اقداص اصوجود 


تقبيت البيانات 
0 النصوذجية اللافنراضية 


1 اضغط هناالئركبب المقالات 
۳ اللاشسام الى ناض س المجله 
ر تحمیل ستربت جاج ايى ياء سضبت فة حلص اوك اقل بوا س طة 
النرقية اجا فة ٣ہ‏ اة ٣و‏ تفس صت خی ينجت صطابقا لايد اة 
ففاا ادخلل اة جناو اة البطاا ت صوق شيهم وناك 
الترصيز انى كان يعمل به از إعدادات اط قي ملف الخة و 
اقح وجك کي رتت انش اى عدص دة صصدح 
rn‏ يجب ايلو ج رة 901 اة دعوفقة مع جملةة انار 


MIWER.COM وا‎ 


نروح نحذف مجلد ل ست #ا لير 
installation‏ 
من مجلد المجلة 


ا ا کا اک ت 
تذگر أٺ تقوم بجذف حار التنثبيت " ٣0أاوااهاور!‏ "' كاهاذ. 
و إلذ لن تكونوا قادرين على الحضي ابعذ عن هذة النقطة إلى 
جين إزالة حار التثبيت. تقذذ صن عات الذحن قي ححاة!. 


:حصلة! بلخنك الأصلية؟ ۱ 
قم بزيارة موقع المساعدة لجصلة! لمجلومات أكثر و الحصول على أحدث اللأصذارات 


لے 
E‏ 


ت 


mtwer.com 4d İ&jd 


MIT WE # CC n 
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بعد انتهاء التركيب 


قم بحذف مجلد التثبيت installa |01٩‏ 
وبهيك تكون ركبت المجلة 
ويمكنك الدخول کالاتی: 
اليوزر٣‏ ۳"1 :a4‏ 
الباسورد :مثل ما حطيت 


www.localhost/joomla/administrator 


MIWER.COM ا‎ 


ملاخظه آخرى ذكرنى بها اخد المشاكل اللى واأجحهت الاأعضاء 


وهى وانت بتنصب المجلة قد تظهر لك هذا الخطاأً 


Fatal error: Allowed memory size of 8388608 bytes exhausted (tried tO 
allocate 43 bytes) in 
C:\AppServ\www\mnm\libraries\joomla\language\language.php on line 


وسبب ذلك أن الذاكرة الافتراضية للسيرفر غير كافية لتنصيب المجلةولحلما 


من قائمة أ٣ةاء‏ من الویندوز نختار €۲۷ئمa0‏ تم نفتح ملفاہ٣!.p٣مp‏ 


a] winPcap ۴ t=" hl 

IF winRAR 

Internet Explorer ِ‏ بچ 

WÛ mon Ww .pngl 3 View 
ا‎ wiutlook Express 8 ûdd-Rermaoye Windows Seryice F e Add t 
yı Remake Assistance EH Loanfiguration Serwer ۴ ٦ ûpache Edit the httpd, conf Configuration File 
Û Windows Live Messenger n] Lontrol Server by Manual ÊËğÎ 2parhe Test the httpd.conf Configuration File 
0 Windows Media Player 8 Lontrol Server by Seryice MYSQL Edit the rn¥,ini Configuration File 

Windoms MESSENGEF n Review Server Log Files PHF FEAit the php.ini Lanfiguratian File‏ ا 

A Windows Movie Maker Ëğ H,5ûL Command Line Client CI WINDOWS 
Tan Adobe Fj , Reset MySQL Root Password 

EE ûAppöerty ۴ 7 Uninstall App5ery Y2Z.5,3 

Global5CAPE 

lan Internet Download Manager ۴ 

Microsoft Office ۴ 

ha ت‎ 0 


بعدين انزل لحد ما تجد هذه البيانات 


وبدل الارقام كما بالصورة 


max_executîilon_ti1me = 120 : Max1mum execut1 on 
max_î1nput_time = 90 ; Maximum amount of t1me 
memory_lim1t = 120M ;, Maximum amount of memı 
نكنب ملل هذه الارقام ید‎ 
ثم نحفظ النغييرات‎ 


; Error handling and Îogging ; 


, error_reporting 1s a bîit-field. or each numbe 
rebortina leve 


MIWER.COM واف‎ 


نروح نقوم باعادة تشغيل السيرفر لتتفير الاعددات 


LEI سشوف‎ 
ı Remote Assistance anl w_onfiguration Server ۴ 
Windows Liye MESSENAEF w_onkrol Server by Manual ۴ 
Windows Media Player af Control Server by Service k ûpache Monitor 


Win dos Messenger anl Review Server Log Files 


ÊËğ 5L Zommand Line Client 


ES 2 I BE E ET L 
, Apache Restart 
Windoms Movie Maker 


ûpache Start 


E Û FS HE ê # O ET 


Adobe Reset MySHL Root Password ٦ ûpache Stop 
Appîer+ (3 Uninstall AppSer+ +2.5 Ti MySQL Start 
alobal5Z APE ٤ 7 i MYSQL Stop 
Internet Download Manager ۴ 

تقوم باعادة سبل السيرقر Microsoft Office ۴٤‏ 


لايوجد تطبيق مطلوب فى هذا الدرس 


vista-desigN۾pكgخ|‎ 


۱۱ 


مطور N7W€۸.00 1N‏ 
[22ا00mز]‏ شرح لوحة تحكم المجلة وتعريف للقوالب-الموديلات-الكومبونينت 


فى هذا الدرس راح نشرح لوحة تحكم المجلة والتعرف على وظيفة الاغراض 
المقهة التى راح تس دهها فيه بد 


اول انساء لاند أن تفقوا مخضوضص ركب الأضفاقات كى المحلة 


-اى اضافة راح تضيفها راح تثبتها من مدير التثبيت 
صورهة. 


Tools Help 


SIE Menus Lontent Components | Extensions 


QJ | Extension Manager & Moe veneer 


e, Plugin Manager 


Template ManaqEer 
E Templates 


Install Lomponents Modules 
= Language Manager 


Upload Pack Fil ا‎ E 
ploaûd Package FIlE أ و أختار الشافة الت ,ا“‎ ) 
Package File: ...اجر اض ترکبها‎ lIploa: 


قالب او مودیل او کومبوتنینت 


Install from Directory 


Install Directory: LA ppb Ermer trp اراق پیت رکب و ا وکت‎ Install 
پاقعها على مساحة موقعك‎ 

Install from URL 

Install URL: hip a e Install 


eks 
وة تصميم المجلاتالأترنية‎ ) 


برعاية ۲.80111 W8‏ کہہے ر“ visladesign‏ 


1. f pe 


loomlal! is Free =oftyare released under the 13I" 


AIT VER. O 


-ای اضافة یجب ان تکون ملف مضغوط وبأمتداد م71 ولیس٣ه۲‏ 
-ای اضافة راح ترکبها لابد ان یکون السیف مود مقفل حتى يتم رفعهاء واذا 
كان السيف مودشغال على السيرفر 
يجب تفعيل نظام ال طافى المجلة وانا نوهت لهذه النقطه اثناء تنصيب 
المجلة 


مطورN7W€۸.001N‏ 
ثانيا:تعريف للاضافات الخاصة بالمجلة: 


-الموديل = عاduلم"هو‏ عبارة عن أاضافة برمجية يتم تركيبها على مجلة(مثل 
الماك فى المنتديات ) تعطيك خصائص 
أمكانيات مفيده للمحلة 


مثال:مودیل السلاید شو والذی یعرض لك صور اوتوماتیکا باستمرار (سوف 
يشرح فى الفيديو فى نهاية الدرس( 


ل وةل ات د الاجطاات 


Module: [ Edit ] )‏ ج 
شرح خیارات مودیل ولکین ا 2 
الإاحصاپات ع]2إd‏ 5¥ 1 ج@ 
Detajlş# IMEWEF.GOII iil)‏ 
Module Type: Mod syne ale‏ 


Title: Syndication 


Show Title: @ No O Yes 


ما ال CERT‏ — 
ن ظهور لموديل شی ردیس order: breadcrumb‏ 
1 المجله debug‏ | 
سسار۔-يميڻ-۔اماکن اخری راح يتم Access Level: EI‏ 


swndicate 


ın: top 
| user] 
Description: | zer Module that creates a Syndicated Feed 
EZE 2 the Module is displayed. 
| ue 


Menu Assignment 


Menus: (# ayı O None O Select Menu tem(s) from the List 


Section] EE 
2 echon I able 
خياراترظهوں الموديل ذ11 ا ورة تصميم المجلات الألكترنية‎ 


Lateqory [I able ۴ 
fegcorncepfs واشسام المجلة ف‎ 


1 T WE. E M ور‎ 
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-القالب =عةام ”اهو عبارة عن أشكال(مثل استايل المنتدى) يتم تركيبما 


MIWER.COM وا‎ 


متثال: قالب شركة 2۲|٣0ه٥ز‏ المشهور) ٤۲١٥ع‏ 2ز سوف يشرح فى الفيديو 
فى نهاية الدرس( 


-الكومبونيت=هو عبارة عن نظام برمجى مثل الموديل ولكن ذو خصائص 
وخیارات تحکم اکبر 


متال: كومبونينت التعليقات الذى يتم تركيبه لعمل تعليقات على المقالات 
ملاحظه: معظم الكومبونتات لابد من عمل قسم ١0|ڄ٤ع5‏ وفرع cat€gO/¥Y‏ 
خاص بها 
لان الكومبونيت يمكنك من عمل قسم خاص بهذا الكومبونيت 
مثل معرض الصور فهو کومبونینت لابد من عمل قسم وفرع حتى تندرج الصور 
فيه (سوف يشرح فى الفيديو فى نهاية الدرس( 


الحين بعد ما تعرفنها على أهم الأشياء فى لوحة التحكم 


دعونا نتابع هذا الفيديو ونشوف كيفية تركيب كل اضافة مع مثال حى لما 


لتحميل الفيديو: 


رابط اخر على الميديا فاير من العضو الزابن مشكورا له 


اضغط هاا 


الفظاوب هن الافهاء 


تركيب موديل السلايد شو المرفق ورؤية صوره لخيارات التحكم ومكانه على 


رئيسية المج 


٤ 


MIWER.COM واف‎ 


[23ا0mەز]‏ شرح القالب ٠هدام‏ ١١٠ا‏ تعريغفه-أحزانة البرمجية-البوسشنات 


فى هذا الدرس راح ننطلق خطوة بخطوة فى طريق تعلم تصميم وتعديل 
قوالب جملة متثل ما يحلو لك © 


أولا :تعريف القالب :بكل إختصار هو الثيم اوالاستايل الذى يغير الشكل العام 


ا 


اجزائه: 


ای قالب يتم تركيبه له الاجزاء الاتيه بالنسبة للخيارات فى لوحة التحكم: 


لنرى الصوره: 


ES Previa الق م0‎ Lo 
O © © ¥ O 
Edt LSS AWE اط‎ lose HeEl| 


آ عداداآت آلووع للقالب « > 


Edît HTML 


تصميح المجلات الألشترتية 
vista- design‏ 


A‏ ڈور تحسديم 


PFEYjEY 


الاندكس(رنيسية القالب) 


PararmMElEers 


The parameter file Templateszifl_metamorph_j15params.ini is wrrtable! 


ale] ¥ 
(® Enabled O Disabled 
Default يه‎ 
JES 
لاك‎ 
لاك‎ 
Right Lolan ¥ 
Default #¥# 
خيارات التحكم بالقالب‎ 
Û No Û Ves 
Right Lolan # 
4 
ا‎ 
Tab Une 
1 


Tab Two 


عاا5 ٤اد۲ع٥‏ تغيیر. لون القالب 
Enable IEG YYarning‏ 


Fay‏ ۴ الخط الاقتناضی للفالب 
Template Width‏ 
Left Sidecolumn YYidth‏ 


Right Sidecolumn YYidth 
Splftmenu Submenu Side 


Font Size‏ حجد الخطرط 


Show ModuleslidEr 
ModuleSlider Location 
Moduleslider Height 


Max Modules per row 


Tab 1 Title 


کر ات اك شات 
اترتها 
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0 2 ا‎ se êtryez.eom برعالة‎ 


EE HHI T lk Tlrmn 


MIWER.COM وا‎ 


هن الضوة آجواء القالب هى 


١-الأندكس=×06٣أ=رئيسية‏ المحلة أو القالب 
۲-ملفات ال =ويءالخاصة بالوان وخطوط القالبه ‏ . 
٣-خيارات‏ التعديل على القالب(الالوان المتاحه-العرض-خيارات أخرى) 


بعد التعرف على أجزاء القالب خلونا نعرف نقط مهمه وهى: 


١-يقسم‏ القالب الى أجزاء او آماكن او نقول بوسشن 0510١,‏ والتی يتم 
استخدمها فى اختيار مكان الموديل فى رئيسية المجلة: 


مثلا:أريد ان تكون القائمة الرئيسية للمجلة على اليمين» فراح نختار 


متلا :أريد ان يكون موديل السلايد شو فى الفوتن فراح نختار البوسشن 
الفوتر ٣6ا0‏ هوهكذا ا 


لذلك. ای قالب یتم برمجتها من ای شركة »یکون مدعوم بأماکن او بوسشنات 
تتيح لك اختيار الاماكن بسهولة 


نأخذ مثال عملى: 
ق|Jزب rocket themeةكıر jn perihelion‏ 
شوف صورة القالب: 


mla!l makes it easy to add Articles, 
can edit and manage content 

antent through a graphical‏ 1 لا 
august 2008 template EE ntral over your site.‏ 


HUME JUUMLA! OVERVIEW JUUMLA! LILENSE MURE 4BUUT JUUMLA! AOR HTEHEENEMSS WEE EIMFES 


NEWS FEEDS رgڊصJلl عرض‎ 


Latest News Popular 


ASE 1 DESH Welcome to the Front pagê POLLS 
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Joomla! is used for? 


3 ل 
e 0 4 © Community Sites‏ اسم الدقل ل 
/ 


© Pırblic Brand Sites 


WRITTEN BT ADMINISTEAT OF 0 
„/ miwer.COIÎ برغب‎ 


WEDNESDAY, 14 JANUARY 200P 1 Fly z Tree ® zCommerce 


طبعا انا كاتب على الصورة بعض البوسشنات 


MIWER.COM طا‎ 


ظط کف راخ أفرف فالوس ضعا 


بسيطة:الشرکات المحترمه مثل rocket †۸ ٤۳٤‏ او artاoomز‏ تقوم بأرفاق 
صوره بها جميع البوسشنات فى القالب, 


فمتلا فى هذا القالب » لما تیجیى تنزله 


BANNER 
ICON TOP | 


) TOOLBAR 


HEADER 2 


NEWSFLASH RIGHT 2 


MTWER.CT OM 


وھهذہ ھی البوشنات کلھا 
وطبعا راح تفيدك عندما ترید اختیار مکان لمودیل ما ولیکن السلاید شو 


شوف الخيارات البوشنات فى موديل السلايد شو: 


MIWER.COM واف‎ 


vista-design 


° ] 
ڈورة تصميدح المجاات خن چاچ ۴ 
| 
س 
ر 


„¥ _ miwer.COmM ile, 


يه 
لاحظ الاماكن اللى تخنارها 
مکان للمودیل 
esha module. Note for‏ 
resize and ziaply images Î create a‏ 


priaskthumba. Delete this directory it 
o affect the thumbnailz:. 


xeElect Menu tems] from the List 


پک 


0 
پلا 


7 Module: [ Edit 


Detalls 


Fm 1 1‏ ا 


Module Type: mod_DriasklSS 


Title: [Image lideS hom 


9 Jo 0 Ez 
0 Ja 0 TES 


left 


newsflash 
right 
right 
raht3 
search 
sundicake 
toolbar 
top 

143E Î 
user 
user | 
4sErÎ ZA 
ASE 
USES 
user 
4EM 
EE 


Show Title: 
Enabled: 
Position: نيه‎ 
Order: 


Access Level: 


Description: 


Menu AssIğnmMENnt 
Menus: 


Menuı Selection: 


mmr 


الحين خلونا نعرف الأجزاء البرمجية لهذه البوسشنات فى القالب 


اضغط على ۸۲٣۱‏ اال فوق على اليمين: 


بعدين راح تجد السورس البرمجى للقالب 


برمجية القالب يتم تقسيمها لاجزاء 


خلونا نأخذ القالب من فوق لاسفل ونشوف أجزائه: 


MIWER.COM مطاف‎ 


ر 


# HO AİEPCZCL aCCE33 

definedl ' JEREL' | or die| 'Restricted acce33' j; 

سر 

+ IDUOCTIPE html PUELIL "-FFW3L7FDTD #HIHL 1.0 Transitional ##EN" " 
+ITDl xXulna="htLLp: fM. W3. COEF’ 1333 xhTnlL" xul: langğ='"<?php echo 
he ad 

JAOC: INCIUAE Type="head" ,/> 


IF 


1INE Sle. [="Z?php echo 
*1inE E 1 e Echo 
2 1inkE "H?php Echo 
1INE "<?php eEchn 
1INE LYLE: : ="?php echo 


r PFT fF 
ITF yp, yr 


۳ 


ITF 


~1inE a echo : -bhazEUEl ?> 
a EHIE 
0 1fI§Tthi3->direction 

: href="<?php echo $this-Fb4 2 Lep latez #rhuk uilkyay 


PHAIÊZ ?> 
TREE 0 mtwer.COM dıle. 


MT WE N اا ت‎ n 


بعدین ننزل شوف: 
راح تجد الموديلز والبوسشن الخاص 


body id="pağe_ bg" cla33a="color <?php echo $thi3z->parana->geL[ 'colorvariation' } ; 
Za HaME="Up"”" id=" Up'" "22 f7 a 
Aiy Cla33="cZEnteEI" alignh="CENLTEL'"+> 
Ai id= "TEAPPEE"" 
ZAIiF 1A="wraDPpEE_F"> 
AIF 1A='""heafdErE"" 
Air 1A=" header 1]""> 
Ai iA=" header r" 


ZAI 10-E ></a>‏ الكود ١‏ ر 
cr include Type="‏ لمتحم الیو 

KT‏ ۱ | 1 ر 

لكود المتحكح بالموديل اللي اسمة صتا A‏ 


2 Ii 


" HAE ر‎ 


AIF 1A='""Tabarea'"z 
Air 1idA=""Ttabarea_ l1l'"> 
Air id=" tabarea_ F"> 
AIT 1A="LaAbBbHETI"" = 
*LEableE cellpadding=™"U0" cellspacing=" U0" clas3="pi11ll"'> 
LEE 

TEA Glaza="pill_ l"t<esnb3zp LA 
TEA Glaza="pill_ m"+> 
TAIT i1A="pillmeFHu'' 


ZJAoOC:inCIUAE TFpEeE="uodule3'"" 
2 Ai 
حا ر‎ 
ZLEA clazs="pill_ r">enb3p 2X7 LA 
ZF EE 
Lab lez 


دو رة س ميد ١آ‏ ا 
الالكترنيه 


Ai ا‎ IMWEE. COT يرعايةه‎ VI 
r et MT WFR. TC O Ml ista-design 


o 


۱۹ 


MIWER.COM وا‎ 


بعدين ننزل للأخر راح تجد كود الفوتر: 


للا ر 


٣ 5‏ ا ا #1 ج 
ذورة تصميد المجلات الالكترنية بدابة الفوتر 
dir id="footer_1"» vista-design‏ 
Aiy id="foo0tEE FE"‏ 


2p iA="syndicalte""; 


ZIdoc: include type="uodulesz" name="zyndicalte" 


pz 


(Powered by'] ?> <a href="TLTLp: f f 
lid'j 7> <a href="http: ffwalidatoEr.: 
E 


i < 
Ai 


FAIT 


كود الحقوق الدى يوضع 
FER. 3 ِ‏ >11 2 
doc: include Ttype="uodulez" nameE="debug" #%‏ 


بأسفل القالب 5 


ص“ 


٣ کے ی‎ OR. SO rar 


+ body 
+#htmlz> 


MT VWEFR. 


طعا انا شرخت اخراء القالب برمخا ,جى اساد متها فى الائف' 


-احذقف او تعديل جزء من الموديل 
-2لاحقا:راح تتعلم كيف تضيف هيدر+فوتر بكيفك © 


الى هنا انتھی الدرس 
الموضوع مجرد تعريف 


وأکید راح یکون فيه نقاش للرد على ای سؤال 


vista-desig NJتایحت‎ 


MIWER.COM طا‎ 


[ 00۸714[ ]شرح تصميم الهيدر والفوتر للقالب والتعديل عليه 


فى هذا الدرس راح نتعرفق على كيفية تصميم الهيدر والفوتر على اى قالب 


تریده 


اولا: دعونا نشرح كيفية تصميم الهيدر والفوتر 


نفتح الفوتوشوب »بعدین نسوی عمل جدید بمقاسات ۷۷۷ عرض فی 111 
طول 


وانا فى هالمثال راح اصور الشاشة عندىء. وراح أخذ الهيدر الخاص بالموقع 
هنا 


J 


وراح اسحبه لاعلی صفحة العمل 
وبعدين راح نبدا بتقطيعه باداة التقطيع 
لتلاتة قطع (شمال-وسط -يمين) 


û © hed.png û 66.7% (RGBIB) 


4 

Slice Tool |‏ ت إا 
RTS Slice Select‏ 
چ 


BEET 2ı Doc: 43 ZK 43b AK ۴ 


NaN 


۲١ 


MIWER.COM مط‎ 


ويفضل عند التقطيع ان تجعل مقاس الجزء الايسر=مقاس الجزء الايمن 
بعد ما قطعنا 


اضغط من فوق علی5عW‏ 0۲ا sav€‏ 


>2۷ بعدین نختارع6‎ 
Dptinized “4, 2-Up hh 4-Up ™., 
d As 


O ê Fr E 


دورة تصميم اللات الالكترونية 


ور 


ا 


File Hame: 


awe a3 pe: 


Getta: Default Setirngzs ميه‎ 
Slices: جه e2اا5 ات‎ 


و ر 


۲ 


MIWER.COM واف‎ 


mtwer DL miwer_02 a ی‎ 


الحين تمام خلصنا من التصميمء وطبعا الفوتر هو نفس الموضوع 


وقم بنسخ السورس الخاص بالقالب|"†h index.‏ 
من لوحة تحكم المحلة كما شرحنا سابقا 
template managerZedit index 2 copy‏ 
ملاحظه :راح اشتفغل علی قالب ااا uں۸_۴[‏ الذى يأتى مع المجلة جاهز 


الحين افتح برنامج الفرونت بيجD29€٥ front‏ 


تم انتقل لخانة أل عمdهعءمن‏ اسفل 


وقم بلصق السورس البرمجى للقالب 


بعدين فى المنطقه المشاره قم بأضافة ثلاث جداول 


91 


MIWER.COM واف‎ 


Edit Yijew Insert Format Tools Table Gata Frames Window 
e RA TE NE E PAT ET e EAL 
1 I O ET 


paqe_1.htm” 


* iz derivative of works licenzed under the GU Geyferal Publi 1 b¥ 3 Table 
* ather fFIEE OE DOpEN 3OUECE ao0ftuware licer3eEzg., 

* Bee LCUPFTREICHT. php for copyright notices and ¥gFtai1ls. 

e 

## nû direct access mtwer. COI ترغانة‎ 
definedl ' JEREL' j or die| 'Restricted aglCe3z3' j; 


دورة تصميم اللات الالكترونية 
include_ornce [dirname l_ FILE .DB.'F# vars.php'} ;‏ 


vista-design‏ د 


4 IDOCTYPE htul PUBLIC "-FFUSLC7 HEU HINL 1.0 Transitional s#7EN" "http: f7 umur 


ZITuL xXulnz="hLLp: f fmm. T3. OOF 1333 xhtul" xul: lang="4 ?php echo $thisz->lan 


کي 
OOO / ms‏ 
ر واضف لاٹ جداول ۰ 

“ 


heads 
+ IAocC: include Ttype="hfead" 9 

او ج چک : : 
+?php JHIHL::_['behavionr.mootoonlz'];} ?>‏ 


link rel="stylesheet" Iref="<?php Echo 5TupToolz-<baseEUurll)] 3 ?>Tteuplates, 
link rel="stylesheet" href=" ?php Echo 5TupToolz-<baseEuUurll] 3 ?>Tteuplates, 
link rel="stylesheet" href=" ?php Echo 5TupToolz->TteEuplalteEUElLl]? Ff CEST 


الحين نرجع لخانة كمل من أسفل 
ونقوم فى كل جدول بوضع الصورة الخاصة به 
الجدول الايسر=الصورة اليسرى 
الجدول الاوسط=الصورة الوسطى 


الجدول الايمن=الصورة اليمنى 


٤ 


MIWER.COM وا‎ 


TablE Data Frames Window Help راید‎ 


رة تھ ا د ع ا ر رک رک د ا ت 


2p lB u | —ٽ‎ Fn REN e 


اغ ر a‏ 
٣‏ ت 


أضعغط واضصف الصررة 


الجدول اليسار=تصضيف الصورة اليسار 
الجدول او سط نصيف الصورة الوسطى 8 
٣‏ ا 
الجدول الايمن: نضصيف الصورة اليعنى بے ا 


بحیث یکون الشکل النھائی هکذا 


ور 


لذولی من مستخدم الى مطور 


هدد الصور الثلاثة 


mtWer. COM ile 
دورة تصميم الحلات الالكترونية‎ 


vista-design 


لضن درك فى الخطدات القادة 


اولا:عمل الصورة الوسطى كنقطة تمدد» حتی یتمدد الھیدر مع اى مقاس 


-1قف على الجدول الاوسط.تم اضغط كليك مرتين » رأح تفتح خانة'ء 
اختار اة۴۲٣عومن‏ فوق وانسخ رابط الصورة الوسطى 


MIWER.COM واف‎ 


واضغط عليها مرتين 


Picture Properties 


| Appearance | Eneral 


Picture: 
wer portal tutoriallless4limagesirmtmer UF 


Picture File Type... | اتس رابط الصور:‎ 


Alternative representations 


Lo-Res: mtwer. com نرعايك‎ | 


دورة تصميم اتحلات الالكترونية ى لف 


ET 


r 2 
Target Frame: 7 


الحين بعد نسخ رابط الصورة الوسطى. نقوم بحذف هذه الصورة من جدولما 


راا واقف على نفس الجدول الاوسط بعد ما حذفنا الصورة الوسطى 
الخاصة به 


نضغط كليك يمjı‏ وiخliرproperties cell‏ 


MIWER.COM واف‎ 


پالمارس لاا | ا 
لار ll Paste‏ 


318 
E [osert Rows 


۳ Insert _alurmns 
THEE Split Cells... 


ipen Page in New Win dary 


ı4 Manage Editable Regions... 


well Properties... 


Table Properkties,,, 


Page Properlies,., 


A | Fort... 


بعدين نعلم بالاسفل ونقوم بلصق رابط الصورة 


ell Properties 


LayoJk 
Horizontal alianrnent: Default يه‎ : 
Wertical alignment: Default ېه‎ | | 5 mM pixE 
Egy In perr 
Rows spanned: 1 | E [_ [specify height: 
Loalurmns spanned: 1 E Eî In pixe 
In peri 
[JlHeader cell ا‎ 
[ÎRo wrap well Direction: | Mone ېه‎ 


Borders 
_olory 


Light border: || ut‏ ا 


Gark, border: 


E 


۷ 


مطور N7W€۸.00 1N‏ 
تالاص الك وله ي ا تاو ااا 
کی الل حى تساف متامن الضورة قاس الحتول 


تت99u‏ ,ررر 


اط على الحو انرك > اما خط مقاسات المفة فى بالك 


` اليحت‎ ١ التسجيل‎ ١ التحكي‎ ٠ الرثيسيي‎ ٠ 


Picture Properties 


Appearance | General | iden mtwer.com برعايه‎ 


EF‏ اغلات ا#لگترونه 
دور تصميم اجلات كرونب ےک - Wrapping style‏ 
ا E‏ 
vista-desig‏ ` 
1 

‌ Hone Left Right 
)ق‎ 
. : : | 

ûlianrnent: [Default ېه‎ | Harizontal spacing: (U و‎ 
8# ڪڪ س‎ 

Border thickness: Yerkical spacing: 0u |‏ 
ضط مرتين على الصورة واحفظ مقاساتهاا فى 


Specify size‏ د هتك 


in pixels elin pixels 
0 in percent 0 in percent 


Keep aspect rakin 


SEE... 


|_ r 


تم نضغط على الصورة كليك يمين وiختliرproperties cell‏ 


تم نلصق المقاسات فى الجداول الموضحه 


۲۸ 


MIWER.COM ادا‎ 


Lell Properties 


Layout 


Horizontal alignment: 


Yerktical alianrnent: Default ) (®) In pixels 


In percenk 
Rows spanned: 


Columns spanned: (ê) In pixels 


0 In percenk 
[_|Header cell 
۳ Ho Wrap 
Boarders 


Lolor: 


Background 


Lalor; yutomakic ¥ 


تالتا :ازالة حدود الجداول التلاتة e‏ 
قف بالماوس على اى جدول واضغط كليك ıمjı‏ lختliرproperties table‏ 


تم سوى الخيارات المشارة کالاتیى: 


۲۹ 


MIWER.COM واف‎ 


: FIBE EOE ¥  ınserr rFormar IDDOl5S lape Lara rFrfameês wina HEIPp 


ف ھک ع ےک اک ھک ی ہک قا رھ یت فف چ ےد 
ڪا = 3 5 5| Normal +> Times New Roman + 3 l2pt) *| B F4 U‏ : 


new_page_1.htm* Table Properties 
1 Î Layout Took 


(O Enable layout tools 
(O Disable layout tools 


(@) Automatically enable layout tools based onı table cr 


5 
a "| االتسجال اليس‎ ٠ 


Size 


ات 1 ار 1 


Layout 


Alignment: |] Sper 
Float: 10 
0 | ENE 
۰ على الصوںة‎ ۶ ell spacing: CCS E a 0 
واضغط کليك يمين‎ Table Direction: 

واختار 


table properties E 
e Uitte 


[ llollapse table border 


well paddina: 


Size: 


سو ی شالا حدذادات 


Background 


E E] mftWer. COI ile): 
دورة تصميم اللات الالكترونية‎ 


vista-design 5e 


س ر 
[Set as default For new rap‏ 


gn | BE splt Zade Preview ٤ 


الحين ارحع لخانة الكود ٤٥00ء‏ من اسفلء تم انسخ القالب واستبدله بدل اللى 


وفى النهاية راح تجد الشكل كالاتى على الرئيسية 


MIWER.COM واف‎ 


Fils Edl Yiey Favorites Tools Help î 
€ Bark ” 2 5 E ê ٤ ا‎ Search < 7 Favorites 2 2 ا ت ج‎ 0 e 
Address E] http: fflocalhastfmtwery . أا ا‎ G0 Links 


% Joornla! 


ECREE open source males 


IMAGESLIDESHOW Welcome to the Frontpage POLLS 


Joomla! iS used for? 
اسم المقال‎ . 
ا‎ O Sommunity Sites 
i Yvednesday, 14 January 2009 1454 fh administrator | ۳ رھ‎ 


O Public Brand Sites 


۹ 
سے‎ 
f gp O BEOMmMEIEE 
frontpage 
mftWer. COM ila Cy Blogs 
دورة تصميم الجحلات الالكترونية‎ i aR 


تعنی او بدك پطهر فى الرئسبة 


vista-design O Photo and Media Sites 


O All ofthe Above! 


RAAMIRI RAGRII I e) RESULTS 


علاعفة اة لنم كوت نال غلى متوف> الاترتت كسا 


ولیس متصفح اخر 


لان الدرس القادم راح يكون خاص بكيفية تعديل روابط الصور 


حتی لو جینا نرفعها على موقعنا تشتغل تمام 


وبالمثل سوی الفوتر 
الى هنا ینتھی الدرس 


المطلوب من الاعضاء: 


تصمیم اى هيدر ووضعه المتال صورة eT‏ 


١ 


MIWER.COM واف‎ 


[a5اmص00ز]شرح‏ ال كئ‌الخاص بكل فالب وكيفية التعديل عليه 
دعونا ننطلق فی هذا الدرس بالتکلم عن ٤55‏ بشیء بسیط 
طبعا انا ماراح اعقد الموضوع واحجعل الموضوع كله برمحجةءلانى اعلم تماما 


ان ال كوعحتى تفهمه لازم تكون فاهمه بفكرة برمجية ولیس تصمیم لان هذا 
و ون ا اا ات 


اولا ما معنی ٤55:‏ 


ال sیعتعنیى Cascading Styاع Sheets‏ ای بالعامی العربى الشكل الجمالى 
ON‏ 
واقصد بالشکل ا ا جداول-جداول وابعاد - 


لن اتكلم كثير عن معناها والاكثار من الكلام النظرى لان اللى يهمنى انك 
تعرف شی »ء عملی © 


اولا: ای قالب عند تركيبه على حملة » عندما تذھب لل template ¬2a139€r‏ 
وتختار ای قالب 


راح تحد فوق على اليسارككع اأdع‏ 
فلنفرض اننا راح اشتغل على قالب ااام هز مثل السابق 
وخلونا نروح نشوف خیارات ال ککكعفیه 


۲ 


MIWER.COM واف‎ 


SIE Menus Content Components Extensions Tool 


FT Template CSS Editor 


38 


CfA ppSer yiy miwerlemplatesja_puriyicss 
ja-sa0SAMENUH.CES 


TIE LES 


template cas ك‎ 
template_ril.cas a 


0 8 0O © 


Iooamla! iz F 


دورة تضصهيم اجات الالكتروننة 
mtwer.COm ilc,‏ 


الحين لما نفتح راح تجد هالخيارات 
template.cssg» lin leg‏ 
لانه هو التعديل الرئيیسى للقالب 


الحين بعد ما نفتح راح يظهر لنا الكود الخاص بالقالب 


وانا راح اتكلم على عدة نقط مهمة راح تخليك تفهم الئی 


آ اک ولف غ ا د ال او ادا و ںا عا و ا 


یوجد كود ال کئ‌الخاص به 


81 


MIWER.COM واف‎ 


#* HEADER 


#jJa-hsaderwrap 1 
background: #23233333 7 
ELSE FHEEECEEE 
linse-hsidjJht: nornual ; 
hsijJht: SUprr; 


e 


لاحظ توق الخط 4 | 1 
بے المكان اللى ای تعدل و #jJa-hea‏ 


FElalt irs F7 

hai ght : a CSS 

الخاص به پو س 1 

5 + > = 
وش مانا دورة تصميم اب جامد الخا كت و تياد ز . 
شايفين الهيدر إو اعلى القالب HORE She,‏ 

background: urli. . #images header nask . png jw ep e at top righ 
height: SUpxK; ه٢ اوي‎ 
pasition: absolutes; backgrou n dڑqغخلا‎ 
top: O; اللون 0۲اه‎ 
right: ~-lpx?r لوجو0و0|‎ 

جر لا | ٣‏ 

sear البحث‎ 


#Ja-hsader a 1 
calor: FLLLLLLE 
٣ 


راح تلاحظ انه فوق الخط المنقط یوجد عنوان اسمه ۸٥2٤۲‏ 


ورقهد به آنه فا الحو عاص مالتدل .على مطقة المد ر الحاضة القالب 


تانیا: توجحد مصطلحات مهمه فی ای ملف ءک» راح تقابله 
منها: 


ةيفلخلاbackواround‎ 


r€bordeحدود‏ الجدول او البلوك 
sie‏ fontحجم‏ الخط 
yاfami-ontا‏ عة الخط 


٤ 


MIWER.COM واف‎ 


نأخذ مثال : 


color: #FUUUUUUF 

barzrkground: FfFfFfIfIFFF 

font-~faumily: Arial, Hslvrelticzca, sans s=ı 
1lirns-hsight: ISU} F 


body 1 


boadyfhd 


badly. contentpanese 1 


widAlH: auto; * Printabls Pages *, 
Marin: lau Zenuzr 
lirns-hsight: 1l. Zen? 
narin: Upx Upx Upx 
font-size: IlZpr; 
2olor: F333 


دورة تصهبم الحلات الالكتروتية { hod. fsl‏ 


font-size: 10px MItWOF. COI ailes 


ده كود الخلفية فى اول ملفء٤ع.ع€atا/pمtem‏ 


والمتافة الأاضة رة 


راح تجدها کالاتی: 


Yo 


N7W€۸.001روطم‎ 


هده هی ل ط#0dyط‏ 


% Joomla!’ 


...ECOISE OGEN SOURCE MIOMTENS 


IMAGESLIDESHOW Welcome to the Frontpa 


اسم المقال 
ednesday, 14 January 2003 14:54 fh administra‏ 1 


frontpage 


تحنی لو بدك پطهر في الرئيسية 
mMiWEr.COI ile‏ 


ثالثا: عندما ترید تغییر لون اى منقطة. فأنها لكل لون رقم معين 
ولتعرف الرقم يشير لاى لون 
افتح الفوتوشوب 
بعدين اضغط على علامة اللون على اليسار 


٦1 


MIWER.COM مطاف‎ 


و ر 
,2 
ا 
Lolor Ficker‏ ر ک 
czelect foreground colar: LL‏ 2 ,ط 
22 
T |‏ ٍ* 
dv‏ 
EEE IL:‏ ر 2 
U Q |0 |‏ 
GB:‏ 20 ن 
E‏ 
ES 1:‏ : 
1 01 ضح كود اللون هتا وراح تجد لونه 
E:‏ 1 


| 
ا =" 


| lOnly YYeb Colors 


رابعا: اكواد أل ككعتقسم لاجزاء كثيرة 


مثلا راح تجد ان اول القالب یبدا بسورس ال 0۵ط ای جسم القالب 


body {| 
color: F#FUUUUOUUF 
background: F#FffFfFfTfTfZ 
font-family: Arial, Hslvetica, 
lins-hsight: 1SU> F7 


szans-serFI1fz; 


۲ 


1 
mE ms 3 BRE 
background: #33333 7 


bodgy#hd 


3 
کے 
ویو بی سر 
دورة تضصميم الحلات الالكترونية 
mtWer. COM ile‏ 


۲ 


body. contentpane 1 


width: auto; * Printable Pages *, 
unarJirn: leu Z#enuzr 
lins-hsight: 1l. Seu; 
harin: Uprx Upx Upr Upr?r 
font-size: lZpxk; 
mI ms > 
۲ 
body. f=5l { 
font-size: lUpx?r 


É تڪ‎ گڳگڳڳڳگڳگLگk۹kگHkگگگگگگےگ‎ 


۷ 


MIWER.COM وا‎ 


بعدین فيه ۲٤٩2ع"‏ 
بعدين فيه ۸3۷920۸ أك" ويقصد به القوائم الرئيسية 


بعدین 00€ 


طبعا لازم تجرب مره واتنين وعشرة لحد ما تبدأً تأخذ على الموضوع وتتأقلم 
معاه 


لانیى زى ما قلت المفروص أن أل ككعتشرح بلغة برمجة» وليس بلغة تصميم 
حتى تسهل عليك اکتر 
أتمنى تكون وصلت الفكرة 
المطلوب مى الافضاء وذ ضورة لاك جز هن الفالب ققت نير آللون 


الخاص به 
سواء خلفية حدود جدول ای شیء lea.‏ 


تحیاتی 


۸ 


MIWER.COM واف‎ 


[a6اص0ەز]شرح‏ تنظيم أماكن الموديلات +تعديل خطوط القالب لرؤية 
اوضح 


نستكمل معكم مشوار الدورة وهاقد اوشكنا ان ننجز العمل الذى بدأنا به 
فى هذا الدرس راح نتعرف على كيفية تنظيم أماكن الموديلات للمجلة 


أولا: نصيحة مهمه قد يغفل عنما الكثير حدااا<<<<<<<<<<<<< 
عند رغبتك فى تركيب قالب على المجلة 
يفضل أن تنصب المجلة+القالب معا ٻstartbılze quick‏ 
نفهمك . عندما تنزل ای قالب من ای موقع اجنبی 
راح تجد ان القالب به مجلدین 
مجلد القالبعاةامصtem‏ 


quick startaewl jخ| مجلد‎ 


س س 7 
Templates‏ س quickstart‏ ت Extensions‏ ا 


Read ME 
Texl Document 
3 EB 


ص اصاثك 
الموديلات والاماكن الخاصة به 


9 ل هذا مجلد لتتصبب المجلة+القالب 
e 0.‏ اوتوماتیکیا 


۲۹ 


MIWER.COM واف‎ 


مجلد ٣اك‏ )الاي هو عبارة عن مجلة جملة . مدمج معها القالب 
بحيث عند تنصيب المجلة راح تجد القالب ركب اوتوماتيك دون تدخل منك 
بدل من القالب الافتراضى 
لكن ماالميزة فى ذلك!!! 


تنصيب المجلة» راح تجد ان ك١‏ ائم اى اماكن الموديلات كلها موجودة 


Show Title: (@ Ho U ves : 
Enabled: f) rp @ vex چ ت ھی الاماكن الى راح‎ 
Pasition: a-zlidesh E تقار ھا ت للموديل کې يظهر‎ 

ر ۱ | jaslideshowy‏ : 
وما قلثا تیب E breadcrumbs 4 quick‏ 
t1‏ افضل من ا ۱ 


Access Level: 


تركيب القالب بعد تنصيب المجلة 
ا ا ja-sldeshary : CF‏ 
حنى تضمن وجود كانه الاماكن 
ıo: | right‏ 
syndicate‏ 
Description: op‏ 
apzl‏ 
4sErÎ‏ 
serl‏ ِ 
اا ssigğnmenîi‏ 
YSERA‏ 
ASE‏ 
ser‏ 
se‏ 
serb‏ 
HSER‏ 
HSE‏ 


oY 1 J JÊ, slide shovy module. 
hov zing ajax. 


Menus: 


Menuı Selection: 


Fag nma nr 


على کس عندها نركب آلقالي جد تضي الماة 


قد تجد بعض هذه الاماكن غير موجودة 


MIWER.COM وا‎ 


5 <-> 


am amam" 


FEET nibh congue justo est adipiseing elit. 


Nıbh Justo elit nung Pellentesque malesuada 


E B-BIRE BLU-RAY ARB EVD 
DECEMBER 3 


: Tl 1  mkıpaaiTi rear ml Fa 1 erde. Fal hear E 
ra a cr {efu cihanê . in rere: {ecru Lim: 4 mgr mgt rll PL 
2 ıl xere caredleTerPurri arrpar rll ered Û $ O LEHIE 
1F ج‎ 
SdrrEr ER Ll. rêr rha pak E hoe Û iF lang 


KEY COHTEFTS 


MIWER.COM وا‎ 


(No Û Yes ا‎ 3 

ا في ي لی راج O Hn (@) Yes‏ 
آي ق ا 2 E.‏ 

ja-slideshoy FW 4 0 کا فلا‎ 

ق عیب QUICF‏ چ 4 breadcrumbs‏ 

1 اقضل من‎ start 


ركيب القالب بعد تنصيب المجلة 
a-sl dezay 4e + a‏ 
حئى تضمن وجود كافه الاماكن 
right‏ 
sundicake‏ 
op‏ 

apzl 

4E Î 
user U 
ser Î Î 
YSERA 
WSE 
ser4 
zer 
serb 
E-I 
WSE 


o 1 01.01 ےل‎ 2li shar module. 
hoy using ajax. 


E 
A f 


Fagan fr 


Showy Title: 
Enabled: 
Position: 

Order: 


Access Level: 


IU: 


Description: 


ssignmenîi 


Menuıs: 


Menuı Selection: 


هذا مثال لاماكن الموديلات فى هذا القالب 


أعتقد بهيك وصلت المعلومة!! 


هذه كانت أهم نقطة حبيت أوضحها بخصوص الموديلات 


الحين ننتقل للنقطة الثانية: 


تغيير خطوط القالب حتى يتوافق مع لغتنا العربية 


اولا من €۲ man2‏ eعatاempعا‏ نروح ونختار قالبنا 


edi cککراتخن بعدین‎ 


٤۲ 


MIWER.COM وا‎ 


xtensions Tools Help ê Preview 0 
x @ O © YY 
PrewjE'yiy Edit HTML Edt LSS SAYE اک‎ 8 
Parameters 
The parameter file templatezja_zincparams ini i3 writable’ 
Logo iype Image ¥ 
Logo text lû Zin 
للد عم معني حثيغي 931 0ا5‎ 
[ late. 
ا‎ Font size ) 34 ¥ 
Template YYidth WYide Screen ¥ 
Lolor Variation | Mov ¥ 
Show Fant tools ‘fas ¥ 
Show Color tools ‘fes ¥ 
e Menu TypE rmalirrnerll اا‎ 
2 n 
E Menu Module | Moo Mer ¥ 
template.cssرliخi ۾‎ 
Fa 
Lr AhppSEery' 


i 


n 


lEB.CaS 
e پر‎ 
ja.slidEeshONY CS3 e 


template C33 


O O‏ با ی 


ypO. CSS 


راح نجد فی اول الکود ۳11۷ھ م تحت عنوانody۷ط‏ 


راح نغیره » او حتی نضیف له خط ھ٣‏ ٥۸ھا‏ 


A 


MIWER.COM واف‎ 


کود: 


CAppSer Uw joomla2templale.css 


#* LCUNHMUN STTLE 


HEuMl, kbodr, forum, fFisldset { 
uarjJin: ÛU? 
padding: U; 


background: FFFFFFF?F 
color: FUUOUUOOZ 

font-family: "Tahouia", "Takhoua", Arial, Tahbhoua, saz 
lins-heightE: 1l. 57; 


راح تضبف خط ومص۸0هt‏ 
المفضل للقراءة العربية { bodyfbd‏ 


colar: FfF4F34F3AF; 


background: urli . . images bogr-bHy-. PY repeat-x center 3Slprxr FLISLIS13; 


padding: UF 
arin: UF 


۲ 


body. contentpane 1 


وهذه جملة جاهزة لو تحب تضيفما 


font-family: "Tahoma", Arial, Tahoma, sans-serif; 


ال "" مفيدة حتى تعتمد هذا الخط هو الخط الرسمى للقالب 


دعونا نشوفق الفرفق قبل وبعد اضافة خطة٣ ٥‏ ةا 


٤ 


MIWER.COM وا‎ 


شوفتوا الفرق: 


أروع ® 


بهيك یکون انتهی درسنا 


ونرجحو من الجميع تطبيق الدرس 


MIWER.COM واف‎ 


fin21[‏ aا0mهز]درس‏ برمجة قالب مجلة حملة بنفسك من الصفر 
(افوی درس فی الدورة) 


بهذا الدرس الاخير راح نختم اللقاء مع مجلتنا الرائعة , [00١١١3‏ وبعدها ننتقل 
لشرح eمجlةmkportal‏ 


هذا الدرس لم يشرح من قبل » والدرس راح يكون لاول مره لاعضاء الدورة فقط 
فهيا نبدأ طريق برمجة قوالب المجلة من هنا<<<<<<<<<< 
اولا: اذهب الى مجلد كعأةامصع] الخاص بالقوالب 


ثم أنشأً ملف جدید وراح iنږwميa temp_mtWer‏ 


بداخل مجلد , P_ N۴۲‏ € راح ننشأً ملفین: 


templatedetails.xmlIکdلlم‎ 1- 


index.php dn2- 
۱ #صوره‎ 
= index.php = templatedektails, xml 
PHP Srript <> st Document 
û KE س‎ | FE 
VISTA-DESIGN 
دورة تصميم المجلات الالكترونية‎ 
ITI YVeET , COIT1 


MIWER.COM وا‎ 


١‏ -افتح ملف |" ×.ء|atedetaiاtemp‏ ثم ضع به الکود الأتیى: 
کود: 


<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" 
"http://dev.joomla.org/xml/1.5/template-install.dtd" > 
<install version="1.5" type= "template" > 
<name>temp_mtwer</name> 
<creationDate> 31-01-2009</creationDate> 
<author>Nettut Fan< /author> 
<authorEmail>your@email.com < /authorEmail> 
<authorUrl> http ://www.siteurl.com< /authorUrl> 
<copyright> You 2009< /copyright> 
<license>GNU/GPL</license> 
<version > 1.0.0</version > 
<description >temp_mtwer< /description > 
<files> 
<filename>index.php</filename> 
<filename>templateDetails.xml!< /filename> 
<filename>css/template.css< /filename> 

</files> 


<posiItlions> 

< position > breadcrumb < /position > 
< position >left< /position > 

< position >right< /position > 
< position > top < /position > 

< position >user 1 </position > 
< position >user2</ position > 
< position >user3</position> 
< position > user4</ position > 
< position >footer</ position > 
</positions> 

</install> 


MIWER.COM وا‎ 


٣-افتح‏ ملف م۸٣م.×علہi‏ ثم ضع به الكود الأتى: 


کود: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0‏ 
Transitional//EN" "http://www.wW3.org/TR/xhtml1/DTD/xhtml1-‏ 
transitional.dtd">‏ 
<html xmins="http://vww.w3.org/1999/xhtml" xml:lang="< ?php‏ 


echo $this->language; ?>" lang="<?php echo $this->language; ?> 
> 


<head> 
<jdoc:include type="head" /> 
</head> 


اشرح الكود: اول عبارة 10٤۷۷۲8...‏ هى عبارة مهمه جدا تستخدم فی ای 
ملف اندکس بالذات 
وفائدتها انها تحافظ على ابعاد التنسيق بالظبط متثل ما سويناها فى ملفكك 


HHHHHHHHHHHHHHHHHHHHHHHHH 
مثال نظری للاطلاع فقط:‎ 


لو افترضنا ان عرض منطقة فى الصفحة الكلى = ×٠١‏ 
ال۰ ۲۰ ×مpفی‏ ال ککع‌تقسم کالاتی: 


width content+ padding(lt&rt) + border (lIt+rt}+margin(lt+rt) 


لو وزعنا العرض الكلى ٥٠١‏ على هذه المناطق فراح تكون على سبيل المتال 
کالاتی: 


width content=400 pX 
padding=10 pX 
border= 10 pX 
margin = 5pX 


بهيك راح يكون الاجمالی ٥۰۰‏ بكکسل 
نأتى الان لفائدة جملتنا 
فى بعض المتصفحات كالاكسبلورر القديم يتم اضافة قيمة زياده للمحاذاة 
adi94مبدل‏ ما تکون ۱۰ راح تصیر متلا ۱٥‏ 
زيادة القيمة راخ تؤثر باللسلب على شكل الصفحة بالكامل 


من هنا جاءة فائدة الجملة هذه حتی ما تستھبل ای متصفحات وتضیف ای 


MIWER.COM وا‎ 


قيمة على كيفها ® 
HHHHHHHHHHHHHHHHHHHHHHH‏ 
نكمل شرح بقية الكود: 
نأتى لجملة 
کود:P۳۲۴‏ 


<jdoc:include type="head" /> 


کی و ا و لای ی ر وت ا ا 
الان نكمل الشرح 


الان راح نضيف للكود السابق فى صفحة م۸طم.×عdہ!ا‏ الاتی: 


<jdoc:include type= "component" />‏ 
ولكن فى 500۷ للصفحة بجحیت راح يصبح الكود كاملا هكذا 


کود: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"‏ 
"http://WNWW.W3.org/TR/xhtml1/DTD/xhtml!1-transitional.dtd'" >‏ 

<html xmins= "http://www.w3.org/ 1999/xhtml" 
xml:lang="< ?php echo $this->language; ?>" lang="<?php echo 
$this->language; ?>" > 

<head> 

<jdoc:include type="head" /> 

</head> 


| 


<body> 


<jdoc:include type= "component" /> 


</body> 
</html> 


MIWER.COM وا‎ 


الان نرید ان ننطلع علی شکل قالبنا کشکل مبدئی اولی 


ادلخ للوحة التحكم تم ٣2۸39۴۲‏ عأaامصmعt‏ وراح تجد ان اسم القالب الخاص 
بنا 


بعدین اختاره واضغط على االاة6۴‌ل حتى يصير قالبنا هو الأفتراضیى 


۲ #صوره‎ 
YYelcome to the Frontpage 
YYelcome to Joomla! 
Written by Administrator 
Thursday, 14 October 2806 10:00 


Joomla! is a free open source framework and content publishing system designed for quickly creating highly interactive 
multi-language Web sites, online communities, media portals, blogs and eCommerce applications. 


Powered by Joomla! provides an easy-to-use graphical user interface that simplifies tte management and publishing of large 
$ Joornla!’ Yolumes of content including HTML, documents, and rich media. Joomla! is used by organisations of all size5 for 
, | Public YYeb sites, Intranets, and Extranats and is supported by a community of tousands of Sars. 


versiûn 1.5 


Last lpdated f Thursday, OS November AZÛOD0F 124:06 } 


VISTA-DESIGN‏ کا 

ةتصميم المجلات الألكترونية 
Joomla Community Portal Online hat is the FTP layer for? ® Rn‏ 
Written by Administrator Written by Administrator‏ 
Yvednesday, OF July 2ZUÛ04A OS:54 Friday, Ub Qectober ZUOB A127‏ 
The new Joomla Community Portal i5 now onlina. The Joomla The FIF Layer allows file operations (Such as installing E:tensions of‏ 
LAMmMuUNitY Portal i5 A nêw web site for the Joomla community. There updating the main configuration file} without having to make all the‏ 
YOU will find a constant source of information about the aclivitias folders and files writable. This has been an issue on Linux and other‏ 
powering the Joomla Project, learn about Joomla Events worldyyi dê, Unix based platforms in respect of file permissions. This makes the site‏ 
and se8 if tera is a Joomla lser Group nearby. A ney, admin's life a lot easier and increases security of the site.‏ 
monthly Joomla Community Magazine promises an interesting‏ 
overview of project activities, community accomplishments, and ou can check the write status of relevent folders by going to‏ 
learning material. "Help-23ystem Info" and then in the sub-menu to "Directory‏ 


FPFarmissinns" With tha FTFI awer anahlarl awan if all dirertînriaî ara 


الحين نروح لمتصفحنا ونشوف شكل القالب 


۲ #صوره‎ 
YYelcome to the Frontpage 
YYelcome to Joomla! 
Written by Administrator 
Thursday, 14 October 206 10:00 


Joomla! is a free open source framework and content publishing system designed for quickly creating highly interactive 
multi-language Web sites, online communities, media portals, blogs and eCommerce applications. 


Powered by Joomla! provides an 2asy-to-use graphical USer interface that simplifies tte management and publishing of large 
&& Joornlal’ Yalumes of content including HTML, documents, and rich media. Joomla! i5 used by organisations of all sizes for 
„ | Public YYeb sites, Intranets, and Extranets and i5 supported by a community of thousands of users. 


version 1.5 


Last lpdated f Thursday, OS November AZÛOÛ07F 124:06 } 


I VISTA-DESIGN 

ةتصميم المجاات الألكترونية 
a‏ ا * Joomla Community Portal Online hat is the FTP layer for?‏ 
Written by Administrator Written by Administrator ۰ .‏ 
Yvednesday, OF July 2ZÛÛ4A OB:54 Friday, Ob Gctober ZUUB 21:27‏ 
The new Joomla Community Fortal i5 now online. The Joomla The FTF Layer allows file operations (Such as installing BEtensions of‏ 
LOMmMuNitY Portal i5 a NnevY web site for the Joomla community. There updating tha main configuration file} without having to make all thê‏ 
YoU will find a constant source of information about the activitias folders and files writable. This has been an issue on Linux and other‏ 
powering the Joomla Project, learn about Joomla Events worldwide, Unix based platforms in respect of file permissions. This makes the site‏ 
and se8 if thera is a Joomla lser Group nearby. A new, admin's life a lot easier and increases security of the site.‏ 
monthly Joomla Community Wlaqgazine promises an interesting‏ 
overview of project activities, community accomplishments, and You can check the write status of relevent folders by going to‏ 
learning material. "Help-zSystem Info" and then in the SuUb-menu to "Directory‏ 


FPFearmissinns" With tha FTFI aver anahlarl awan if all dirartnriaî ara 


واو جمیل ® 


MIWER.COM وا‎ 


لسه راح نسوی فيه شغل کثيیر: 


لو تتذکر كود "× کان فيه الاتی: 
کود: 


<positions> 
< position > breadcrumb < / position > 
<position>left< /position > 
< position >right</position > 
< position > top < /position > 


<position>user1</ position > 

<position>user2</ position > 

<position>user3</ position > 

<position>user4< / position > 

< position >footer< /position > 
</ positions> 


راح نحدد بوسشن ونخلیه یظهر 


کیف؟ 


نفتح ملف م۸٣.×عل ¡٣‏ ونضيف له بوسشن القائمة اليسرى والفوتر 
کود: 
<jdoc:include type="modules" name="left" />‏ 
کود: 
<jdoc:include type="modules" name="footer" />‏ 
بحیت یصبح الکود کله کالاتی: 


کود: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"‏ 


"http://WNWW.W3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'" > 
<html xmins="http://vww.w3.org/1999/xhtml" xml:lang="< ?php 


echo $this->language; ?>" lang="<?php echo $this->language; ?>" 
> 
<head> 


°١ 


MIWER.COM و‎ 


<jdoc:include type="head" /> 
</head> 


<body> 


<jdoc:include type= "component" /> 
<jdoc:include type="modules" name="left" /> 
<jdoc:include type="modules" name="footer" /> 
</body> 
</html> 


الحين لو رحنا ل manager‏ eاoduصmمن‏ لوحة التحكم 


راح نجد مودیل اسمە‌ںا€1" "ai۸‏ 
وهو کان مضاق سابقا 


حتى يظهر القائمة اليسرى 


#صوره 3 


HOME 

Joomlal Oyeryl aw 
Joomla! Licensê 
iore about Joomlal 
ع‎ 

The NES 

YYeb LINKS 

Mays Feeds 


FEHŞ EHPEHHEH EH FF ¥ ¥ 


JDomlal Homa 
JDomlal Forums 1 
Jomlal Help 

JIY Home 
Administrator 


HFH FHF FF FF ¥ 


# FxleNSIONS 


» LDNOIENÎ LAYOUS 
» Example Fades 


الحین نرید اظهار كود الفوتر على سبیل انه غير موجود من قبل 


o1 


MIWER.COM وا‎ 


footerJl| رlتخ†i‎ »î new نختار‎ متmodule‎ manager نروح ل‎ 


O #صوره‎ 


N Module: [ New] 


Se Administrator 


CÎ Archived Content 
9 Banner 

0 Breadcrumbs 

J Custom HTML 

9 Fee Display 


0 Footer س‎ 


Î Latest Newz 
Î Login 
(Î Meru 
J Most Read Content 
٠۰ نختار البوسشن ا00‎ 
1 #صوره‎ 


Details 
Module Type: #rmod fooler 
Title: 
Show Title: (O No @ ves 


Enabled: Û ıo @ ves 


Position: footer جيه‎ 


Order: | J::Main Menu اا‎ 


نروح نشوف وراح تجد الفوتر موجود 
#صوره ۷ 


Copyright AUS YIsta-deslan. All Rights Eeseryed. 
Joomla! |5 Free Softyare released Under the SMGFL License. 


طبعا هالاشیاء کانت موجوده لاننا نصبناها لما اخترنا عبارة عام" اء ااھtیہi‏ 


oY 


MIWER.COM واف‎ 


ةdواحنا‏ بنصب المجلة 


نكمل ونضيف المزيد من البوسشن والموديلز 
الخين راع تستتدم ملف كك انب الملقات الساقة 


لكن قبل ذلك نرید ان نحدد فی ملف ال م٣مط.×٤d٣آكل‏ جحزء على حدا حتى 
فى كود ك5» نحدد الجزء المراد الاختيار وتنفيذ ال ككئععليه 


وراح نستحدم تنصيص ١10ءأ۷أل‏ مع لأ لتحديد الجزء بأسم معين يمكننا 
اختیاره لنعدل عليه 


ولا ننسی ان نشیر لمکان ملف ککc‏ بالامر)ہ٣|اا‏ 


يعنى بعد هذا التعديلات راح يصبح كود ط٣م.×ع |٣‏ بهذه الصورة 


د 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://WNWW.W3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'" > 
<html xmins="http://www.w3.org/1999/xhtml" xml:lang="< ?php 
echo $this->language; ?>" lang="<?php echo $this->language; ?>" 
> 
<head> 
<jdoc:include type= "head" /> 
<link rel="stylesheet" href="<?php echo $this-> baseurl 
?>/templates/temp_mtwer/css/template.css" type="text/css" /> 
</head> 


<body> 


<div id="container"> 
<div iId="header"><jdoc:include type= "modules" name="top" /> 
</div> 
<div id="sidebar_left" class="float"> <jdoc:include type="modules" 
name="left" /></div> 
<div id="content" class="float"> 
<jdoc:include type= "component" /> 
</div> 
<div id="sidebar_right"class="float"><jdoc:include type="modules" 
name= "right" /></div> 
<div id="footer" class="clear"> <jdoc:include type="modules" 
name="footer" /></div> 


oc 


MIWER.COM وا‎ 


</div> 


</body> 
</html> 


الحین فی داخل مجلد القالب ۳۷٥٤۲‏ _م ٣۳ع‏ راح نسوی مجلد ونسميه؟5٤‏ 
داخل هذا المجلد نسوى ملف ونسميهە‌؟٤٤ع.ع€أaامtem‏ 


#صوره ۸ 


nplatesiternp_rnbiwer css 


= template, css 
wascading Style Sheet Document 


وراح نضيف له هذا الكود الخاص بالتعديل على البوسشن والموديلات 
کود: 


“4 
padding: 0; 
margin:0; 
} 
ul 


list-style:none; 


.float 4 
float: left; 
.clear 4 
clear: both; 


#container f 
width:96OpX; 


O0 
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margin: auto; 


} 

#header { 
background-color: #999999, 
height: 15O0pX; 

} 


#content ¢ 
width: 66O0pX; 
text-align: center; 


ٍ 
#sidebar_left 4 
text-align: center; 
background-color: #CCCCCC; 
width: 150px; 


} 
#sidebar_right 4 
background-color: #CCCCCC; 
width: 9OpxX; 


} 
#footer ¢ 
background-color: #999999, 
text-align :center; 


} 


الحين نريد متلا عمل موديل جديد للبحث وتسجيل الدخول 
راح نطبق نفس الخطوات السابقة 
نرsح module managerJ‏ 
ڏمnNnew‏ 
تم نختار c1‏ اaعs‏ ومرہ اخرهہ ل٣‏ اوہ 


ونختار البوسشن الخاص بهم وهكذا a‏ 


°٦ 


MIWER.COM مطاف‎ 


Module Type: mod_search 
Title? search 
show Title? U) No @ veg 
Enabled: O yo @ ves 
Position: tap ¥ 
Order: 


ecess Level: | “ 


ID: 


Description: Play û search bûk. 


Module Type: mod login 
1 Tilê; 
Show Title: 

Enabled: 
Position: 
Order: 


ASBEESS Level 


IG: 


Description: yS a USE NAME BF 


registration ts enabled (ın the Global 


بهيك يكون انتهى درسنا على أمل ان تكونوا عرفتوا طريقة عمل قوالب جملة 


وفى دروس قادمة راح نحاول نتعمق لعمل قالب احترافى من الدرجة الأولى 


نرجو من الجميع التطبيق 
تحیاتی 


o۷ 


MIWER.COM واف‎ 


الجزء الثانى من الدورة : التعامل مع مجلة اھ†orمmk‏ 


]mk)pota11[‏ شرح تركيب المجلة على السيرفر المحلى وتشغيلها 


بعد ما انتهينا من التعامل مع مجلة aا١٣0ه0ز‏ بكل ما يخصما 


راح ننتقل للمجلة الثانية الرائعةاة†/oمkصm‏ 
اولا: حمل المجلة نسخة المجلة 
ifile.it‏ 
أضخغط هنا 
بعد التحميل: 


-1نروح لل ١۳"۷20۳1مامفى‏ السيرفر المحلى» ونقوم بعمل قاعدة بيانات 
خاصة بالمجلة 


Protocol ¥Yerslon: 1U 4 


localhost via TCPAPF :aكi‎ 
root localhost :aıختښnil‎ 4 


MYSAL: UTF-8 Unicode [ut] بض حرف‎ 
MyYSAL connection collation: 


يه uff B_unicode_cl‏ | 3 
تا تگوين قاعدة بيانات جديدة 
mip orta)‏ بيه Callation‏ 


عرض حلة اتمزود لات الا 

کا عرض منغبرات المزود N1۷51‏ @ 
ف معلجات ج 

مجمو عات المحارف و05 ااوااCo‏ 
Storage Engines ##‏ 


Helonad privileges Iض‎ 
شھ الإمنبازات‎ 


ا 


2-بعد وضع مجلد المجلد قى ۷“۷W<‏ فك الضغط وراح تجد مجلد < dھoامں‏ 


0۸ 


مطورN7W€۸.001N‏ 
خذه الا واجعله هو اللی فی ۷۷۷ مباشرة 
3-اذهب لملف م۸م.اوور "۸_٣"‏ حتی نغير بيانات الكونفج للاتصال بالقاعدة 


وراح تجده على هذا المسار على افتراض ان السيرفر علىح> 
کود: 


C:\AppServ\www\upload\mkportal\include 


mkpaortalinclude 


mm 
ت‎ AEF ت‎ IPE 
MBE ت‎ PHPEE 


IPB13 


PHPEE:3 


ا 


class_mkportals 
PHP File 
1 EE 


س 
ل 
index‏ ك a htaccess‏ 
File: Firefox Document‏ 
EB J KB‏ 1 


| SMF YE 


Functions 
PHP File 


Ö4 EB 


س 
سس 
kK‏ 
langa_Functions mime _types‏ 
| لیا | PHP File‏ 
15E‏ ال EB‏ 14 


mkboax 
137 ¥ 311 
JPEIa Imagë 


4-بعدين نفتحه ونغير بيانات الاتصال بالقاعدة 


Ml ر‎ 
I iF {!'dAeEFinedi "IN MEP" { 
die [("BOEFEEY !! Tou cannoL accezas This File direcCLlLlFT.'"] F; 


1 


class db_ Ariwer 


5this->db_ connect id = u¥FS{l Connect $this->obj3['dbhozrt' [| , 
ETh1i3-—-<=nh1T ' AqAh113FrF ' إ1‎ 


ت 

5 

ك 

5 

ق فت 
انسح القاعدة Tar #O0b] = array | "dAbnanme'"" = "uportal" gm‏ 1 
"AhHUsEE"" => "FOOD TE"‏ 3 

3 "Aqhpaszawd"™" = "EDOODOTE"" ۴ 

1 "Abhosat'"" => "l1localhoszt"™" 

1 1 

ت 

3 TaAE 5H Id ا‎ 

2 Tar 5ib _ ConHmECTL iqd = "Fg 

3 TAF $5 {UPFYF_ COUNHTE = إلا‎ 

:ا 

7 vista-design 

3 EFUHTCEIOH ConnmeECLI] { 

3 

: mtwer. Com 


م 


٥۹ 
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5-نستدعى المجلة من المتصفح لتنصيبها بهذا المسار 
کود: 


http://localhost/upload/mkportal/mk_install. php 


-6نختار نوع المنتدى اللى راح نركبه مع المجلة 


I MKPÛRTAL Ll1.#.1 INSTALLATIUN ! 


Choose your board 


YY arning: This MEPortal ¥ersion includes a Board inside [AEF]. 
You can choose to install MEPortal to work with a different Board. 
If youı choose an external Board be sure that it is already installed and working. 
If you select he AEF Internal Board this installer will set up the board automatically. 


LAEF MEportal Internal Board 
SMF External Eoard 

IPE 2 External Board 

IPE 1,3 External Board 
PhpEE ZE External Board 
PhpEE 3 External Board 
YWBEullatin External Board 
MuBE External Board 


اختار المنندى اللى بدك نركبه مع 
المجلة 
والافتراضى اللي يركب مخ لر ا 
المجله ری س 
VISTA-DESIGN aeforum‏ 


6-نترك هذه الاعدادات کما ھی 


I IEKEPUORTAL CI.2.1 INST ALLATI ION ! 


tIteE OREL: 
lIrl of your sits wheres the MEPortal indax=, php fils is, 
wf rite it without thea final slash [2.9., htpiffexsarnpls. carn ]. 


http:fflocalhoast upload 
دع هذه الآاعدادات کما هی‎ 


Forum Girectory Hame: 

Girecztory Hames of your forum, Write it without the final slash, 
Far Exarnpls=, if Your foarurn is in a diractory narnesd 'foarurn' 
write anly tha word: fFforurn 


25fFarFUrn 


ETE‏ چا 
/ 8 


e‏ س 
pe MEPortal 2003-2008 mkportkal, it‏ 
VIS TT A-DESIG PR‏ 


MIWER.COM واف‎ 


Thank you for downloading AEF 


ûEF 1.0.6 requires PHP 4.1.0 or higher and MySQL 3.23 or higher 
You will also need the following MyYSOL Information: 

llsBrHNAME 

Password 


Catabase Name 


MM 
se HosthamE 


Llıck the Install button to start the setuıp for Your new AEF Board. 


Install ج‎ 


ر 


E 


ہے 


ا 
ابوا کے ت 


VISTA-DESIGN 


9-نكتب البيانات الخاصة بقاعدة البيانات+عضوية الأدمن 


1١ 


MIWER.COM وا‎ 


MySQL Settings 
ا‎ 


MySQL 
This I5 usually localhost, ES 
MySQL Database Name : joomla نكت انات القاعفة‎ 


MySQL Password : 


MySQL Table Pre 
The prefix for EYe 


Root Admin Account 


tr 
A, Fp 


VISTA-DESIGN 
LsernamEe : 
Password : بباتات عضوبة الأدمن‎ 


Confirm Passvyord : 


Your email : mid M.cor 


Congratulations, the board was Ins 


Thank You for UsIng AEF, 


If Yol neBA any support ¥Youı can always count on U5, Just drop In at our 5 


You can also customize AEF bY Installlng new themes, If You know PHP or 
And If youl are goo at HTML or Java Scripting then try and make a theme, 


In the meantime let's q0 complete the Mkportal Installation. 


Complete Installation 


کے 


VISTA-DESIGN 


1۲ 


MIWER.COM طا‎ 


I! MEPUORTAL C1.2.1 INSTALLATION |! 


MEPORTAL SUCCESSFULLY INSTALLED! 


For database secuAty reasons immediately delete mlk_install.php and the mkportal upgrades folder from the seryer., 


Warming: ¥Ooluı ا‎ to immediately delete the aeforım setup folder and the aeforum f uupgqrade folder 


8 


Enter your nev MK Portal 


مبروك تم تركيب النسخة لر ب 


VISTA-DESIGN MEPoartal 2003-2008 mkportal, it 


-12وهذه هى المجلة والمنتدى 


المنتدى اللى الحلة 
مع 8 Tol ars not authorized to visw Shouts,‏ 


ا 


YYelcome GE 


Tou are here: Index 


Statistics Top 10 


Top Posters Newest Members Latest Replies 


Mernber: Pasts: Mernber: Posts: Thread: Last Poster: lews: Replies: 
root 0 Fa ot 1 [1 Welcome to AEF 1 1 
User: 
Pass: General Stuff سے‎ 
Anonymous: [| | . 
Board Topics Posts Last Post 
a at 9:48 pm 
Generals 1 AEF %4 


Register! Talk about anything you like in general! 


Team 


چ 


2am 
ن‎ Mew Posts ی‎ Mo New Posts VISTA-DESIGN 


1 Users online: 


1 lasts 
Û Anonymous 
0 Yisibla!: 


بهيك انتهى تركيب المجلة بنجاح 


نرجو من الجميع تطبيق الدرس وتركيب المجلة +وضع صورة للمجلة عندك 


1 
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[mkporta2ص]‏ درس تأطير وتصميم بلوكات المجلة 


بسم الله الرحمن الرحيم . 
فى هذا الدرس راح نتعرفق على كيفية عمل درس تاطير بلوكات المجلة وانا 
راح اشرح ابسط طريقة رغم انها لها عدة طرق 


اول شىء رح نروح لمسار الصور الخاصة بالمجلة بعد تركيبها حتى نبدأً فى 
التعديل عليما 


۱ صوره‎ # 
LM Appoery mm ploadimkportallternplates1deFaulllirmnagEs 


الحين فلنفرض اننا نريد التعديل على التأطير حول البلوكات 
فلناخذ على سبيل المتال هذا البلوك 
#صوره ۲ 


felcoame Guest 


L-1 


1 = = = === م 


L- - - - - - - - - ل‎ 


Anonymous: ۳ 


Login | 


Register! 


هذا التأطير مقطع نفس الشكل الأتى 


#صوره ۲ 


Anonymous: ف‎ 


Lagin 


Register! 


1٤ 
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الحين نريد عمل مثل هذا البلوك ونقطعه بالمثل» وطبعا عرفنا هذه المعلومه 
من الصور المقطعه فى مجلد الصور 


نفتح الفوتوشوب ونصور صورة هذا البلوك الازرقت ونفتحه بالفوتوشوب ونحوله 
rgb JÛ‏ 


#صوره > 


Image | Laver Select Filler Yiew Window Help 


Fay scale 


Adjustments 

Duplicate... i TnJexed olor 
RIB Zolar 
_MYE Zolar 
Lab Zolar 

Imagê Siz€e,.. Alt +2trl+1 

LanyYas SİzE,.. AHL 

Pixel Aspect Ratio F | ب‎ Gi Bits _hannEl 

Rotate Lanyas ج ج‎ 

E olor Table... 


بعدین راح نسوی تأطیر مثله بالظبط ونقوم بتقطیعه ل1 اجزاء 


الجزء العلوى(ايسر+اوسط+ايمن) 
الجزء السفلى(ايسر+اوسط+ايمن) 


MIWER.COM مط‎ 


E HE] ا‎ 5 10 
EE | 


یب فا وا فط او ال اه واو را ا ا 
کی ف ا 


سهله روح للمجلة وقف بالماوس على حافة البلوك وشوف رابط الصورة بعرض 


#صوره] 


Anonymous: [|_| 


الحين انا عملت تأطير بسيط مو دقيق ومحتاج ظبط اکثر » لان ظبطه محتاج 
تکون دقیق فی 


11 
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-1مقاس الصورة المقطعه عرضا وطولا 
-2تساوى التقطيع » اى ان الزاوية اليسرى العلوية لابد ان يكون تقطيعما 
يطابق بالمثل الزاوية اليمنى العلوية 
وهذا تقطيعنا البسيط وهو محتاج ظبط اكثر 


#صوره ۷ 


by men, Saturday, 27 March 200F 13788 Comments O], Eaad a 


طبعا هذه هى الفكرة العامه لتصميم المحلة 
وبالمتل طبق شغلك على باقى الصور سواء هيدر او فوتر 


ویوحد طرق اخری اصعب شوی لکن هذه راح تفی بالغرض طالما تدربت 


عليها جيدا 


اتمنی یکون الدرس مفهوم 


فى نهاية هذه الدورة أرحو منكم الدعاء لى بأن يوفقنی الله فى دينى ودنياى 
وان یغفر لوالدای 


أخوكم: محمد 
أف نفس ارات اخرک 
یمکنکم التواصل عبر عضویتی فی موقع مطور: 
Vista-desiqn‏ 
| 


1۷ 


